import * as echarts from '../node_modules/echarts/dist/echarts.esm.js';


let myChart1 = echarts.init(document.getElementById('mychart1'));

myChart1.setOption({

    title: {
        text: '网格grid组件',
    },
    grid:{ 
    //说白了网格组件就是一个矩形框,后面所有的柱状图,折线图和散点图都要在这个矩形框中绘制,类似于一个装图表的容器,饼图,雷达图这些不需要网格,因为他们是非直角坐标系图表
    //一个图中可以放多个网格,每个网格可以有不同的配置,以数组的形式赋值给grid,并且需要使用index来区分每个网格与数据的关系

    show:true,//是否显示直角坐标系的网格
    borderWidth:1,//网格边框宽度
    borderColor:'red',//网格边框颜色
    left:'20%',//网格左边界,距离左边界的距离为20%
    right:'20%',//网格右边界,距离右边界的距离为20%
    top:'0',//网格上边界,距离上边界的距离为0%
    bottom:'0',//网格下边界,距离下边界的距离为0%
    // width:'80%',//网格宽度,默认auto,可选值:width,height,100%表示宽度为100%,可以用left和right来控制宽度,一般不手写
    // height:'80%',//网格高度,默认auto,可选值:width,height,100%表示高度为100%,可以用top和bottom来控制高度,一般不手写

    containLabel:true,//网格是否包含标签,默认false,设置为true后,网格会包含标签
    backgroundColor:'yellow',//网格背景颜色
    },
    legend:{
        show:true,
        data:['销量'],
    },
    xAxis: { // 配置X轴
        // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        splitLine:{ //x轴上刻度值的分割线(竖线),默认显示,可以设置为false不显示
            show:false,
        },
        axisLine:{ //y轴上的轴线,默认显示,可以设置为false不显示
            show:true,
        },
    },
    yAxis: {// 配置y轴
        splitLine:{ //y轴上刻度值的分割线(横线),默认显示,可以设置为false不显示
            show:false,
        },
        axisLine:{ //y轴上的轴线,默认显示,可以设置为false不显示
            show:true,
        },
    },
    series: [ 
        {
            name: '销量', //这里是用来在图例中显示,只要配置了这个name,即使legend中并配置data也可以展示
            type: 'bar',
            data: [120, 200, 150, 80, 70, 110, 130]
        }
    ]
});